import { CookieService } from 'ngx-cookie-service';
import { Component, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { AppConfigService } from './shared/service/appconfigservice';
import { AppConfig } from './domain/appconfig';
import { Subscription } from 'rxjs';
import { ThrowStmt } from '@angular/compiler';

@Component({
  selector: 'app-config',
  template: `
    <div class="layout-config" [ngClass]="{ 'layout-config-active': active }">
      <div class="layout-config-content-wrapper">
        <a
          tabindex="0"
          class="layout-config-button"
          (click)="toggleConfigurator($event)"
        >
          <i class="pi pi-cog"></i>
        </a>
        <a
          tabindex="0"
          class="layout-config-close"
          (click)="hideConfigurator($event)"
        >
          <i class="pi pi-times"></i>
        </a>

        <div class="layout-config-content">
          <div>
            <h4>字体大小</h4>
            <div class="config-scale">
              <button
                icon="pi pi-minus"
                type="button"
                pButton
                (click)="decrementScale()"
                class="p-button-text"
                [disabled]="scale === scales[0]"
              ></button>
              <i
                [pTooltip]="s"
                (click)="setScale(s)"
                style="cursor:pointer"
                class="pi pi-circle-on"
                *ngFor="let s of scales"
                [ngClass]="{ 'scale-active': s === scale }"
              ></i>
              <button
                icon="pi pi-plus"
                type="button"
                pButton
                (click)="incrementScale()"
                class="p-button-text"
                [disabled]="scale === scales[scales.length - 1]"
              ></button>
            </div>

            <app-inputStyleSwitch></app-inputStyleSwitch>

            <h4>按钮波纹效果</h4>
            <p-inputSwitch
              [(ngModel)]="config.ripple"
              (onChange)="onRippleChange()"
            ></p-inputSwitch>

            <h4 style="display:none;">Free Themes</h4>
            <p style="display:none;">
              Built-in component themes created by the
              <a href="https://www.primefaces.org/designer/primeng"
                >PrimeNG Theme Designer</a
              >.
            </p>

            <h5>Bootstrap</h5>
            <div class="p-grid free-themes">
              <div
                [class]="{ active: config.theme == 'bootstrap4-light-blue' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'bootstrap4-light-blue', false)"
                >
                  <img
                    src="assets/showcase/images/themes/bootstrap4-light-blue.svg"
                    alt="Bootstrap Light Blue"
                  />
                </button>
                <span>Blue</span>
              </div>
              <div
                [class]="{ active: config.theme == 'bootstrap4-light-purple' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="
                    changeTheme($event, 'bootstrap4-light-purple', false)
                  "
                >
                  <img
                    src="assets/showcase/images/themes/bootstrap4-light-purple.svg"
                    alt="Bootstrap Light Blue"
                  />
                </button>
                <span>Purple</span>
              </div>
              <div
                [class]="{ active: config.theme == 'bootstrap4-dark-blue' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'bootstrap4-dark-blue', true)"
                >
                  <img
                    src="assets/showcase/images/themes/bootstrap4-dark-blue.svg"
                    alt="Bootstrap Dark Blue"
                  />
                </button>
                <span>Blue</span>
              </div>
              <div
                [class]="{ active: config.theme == 'bootstrap4-dark-purple' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'bootstrap4-dark-purple', true)"
                >
                  <img
                    src="assets/showcase/images/themes/bootstrap4-dark-purple.svg"
                    alt="Bootstrap Dark Blue"
                  />
                </button>
                <span>Purple</span>
              </div>
            </div>

            <h5>Material Design</h5>
            <div class="p-grid free-themes">
              <div
                [class]="{ active: config.theme == 'md-light-indigo' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'md-light-indigo', false)"
                >
                  <img
                    src="assets/showcase/images/themes/md-light-indigo.svg"
                    alt="Material Light Indigo"
                  />
                </button>
                <span>Indigo</span>
              </div>
              <div
                [class]="{ active: config.theme == 'md-light-deeppurple' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'md-light-deeppurple', false)"
                >
                  <img
                    src="assets/showcase/images/themes/md-light-deeppurple.svg"
                    alt="Material Light Deep Purple"
                  />
                </button>
                <span>Deep Purple</span>
              </div>
              <div
                [class]="{ active: config.theme == 'md-dark-indigo' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'md-dark-indigo', true)"
                >
                  <img
                    src="assets/showcase/images/themes/md-dark-indigo.svg"
                    alt="Material Dark Indigo"
                  />
                </button>
                <span>Indigo</span>
              </div>
              <div
                [class]="{ active: config.theme == 'md-dark-deeppurple' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'md-dark-deeppurple', true)"
                >
                  <img
                    src="assets/showcase/images/themes/md-dark-deeppurple.svg"
                    alt="Material Dark Deep Purple"
                  />
                </button>
                <span>Deep Purple</span>
              </div>
            </div>

            <h5>Material Design Compact</h5>
            <div class="p-grid free-themes">
              <div
                [class]="{ active: config.theme == 'mdc-light-indigo' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'mdc-light-indigo', false)"
                >
                  <img
                    src="assets/showcase/images/themes/md-light-indigo.svg"
                    alt="Material Compact Light Indigo"
                  />
                </button>
                <span>Indigo</span>
              </div>
              <div
                [class]="{ active: config.theme == 'mdc-light-deeppurple' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'mdc-light-deeppurple', false)"
                >
                  <img
                    src="assets/showcase/images/themes/md-light-deeppurple.svg"
                    alt="Material Compact Deep Purple"
                  />
                </button>
                <span>Deep Purple</span>
              </div>
              <div
                [class]="{ active: config.theme == 'mdc-dark-indigo' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'mdc-dark-indigo', true)"
                >
                  <img
                    src="assets/showcase/images/themes/md-dark-indigo.svg"
                    alt="Material Compact Dark Indigo"
                  />
                </button>
                <span>Indigo</span>
              </div>
              <div
                [class]="{ active: config.theme == 'mdc-dark-deeppurple' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'mdc-dark-deeppurple', true)"
                >
                  <img
                    src="assets/showcase/images/themes/md-dark-deeppurple.svg"
                    alt="Material Compact Dark Deep Purple"
                  />
                </button>
                <span>Deep Purple</span>
              </div>
            </div>

            <h5>PrimeOne Design</h5>
            <div class="p-grid free-themes">
              <div
                [class]="{ active: config.theme == 'saga-blue' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'saga-blue', false)"
                >
                  <img
                    src="assets/showcase/images/themes/saga-blue.png"
                    alt="Saga Blue"
                  />
                </button>
                <span>Saga Blue</span>
              </div>
              <div
                [class]="{ active: config.theme == 'saga-green' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'saga-green', false)"
                >
                  <img
                    src="assets/showcase/images/themes/saga-green.png"
                    alt="Saga Green"
                  />
                </button>
                <span>Saga Green</span>
              </div>
              <div
                [class]="{ active: config.theme == 'saga-orange' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'saga-orange', false)"
                >
                  <img
                    src="assets/showcase/images/themes/saga-orange.png"
                    alt="Saga Orange"
                  />
                </button>
                <span>Saga Orange</span>
              </div>
              <div
                [class]="{ active: config.theme == 'saga-purple' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'saga-purple', false)"
                >
                  <img
                    src="assets/showcase/images/themes/saga-purple.png"
                    alt="Saga Purple"
                  />
                </button>
                <span>Saga Purple</span>
              </div>
              <div
                [class]="{ active: config.theme == 'vela-blue' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'vela-blue', true)"
                >
                  <img
                    src="assets/showcase/images/themes/vela-blue.png"
                    alt="Vela Blue"
                  />
                </button>
                <span>Vela Blue</span>
              </div>
              <div
                [class]="{ active: config.theme == 'vela-green' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'vela-green', true)"
                >
                  <img
                    src="assets/showcase/images/themes/vela-green.png"
                    alt="Vela Green"
                  />
                </button>
                <span>Vela Green</span>
              </div>
              <div
                [class]="{ active: config.theme == 'vela-orange' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'vela-orange', true)"
                >
                  <img
                    src="assets/showcase/images/themes/vela-orange.png"
                    alt="Vela Orange"
                  />
                </button>
                <span>Vela Orange</span>
              </div>
              <div
                [class]="{ active: config.theme == 'vela-purple' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'vela-purple', true)"
                >
                  <img
                    src="assets/showcase/images/themes/vela-purple.png"
                    alt="Vela Purple"
                  />
                </button>
                <span>Vela Purple</span>
              </div>
              <div
                [class]="{ active: config.theme == 'arya-blue' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'arya-blue', true)"
                >
                  <img
                    src="assets/showcase/images/themes/arya-blue.png"
                    alt="Arya Blue"
                  />
                </button>
                <span>Arya Blue</span>
              </div>
              <div
                [class]="{ active: config.theme == 'arya-green' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'arya-green', true)"
                >
                  <img
                    src="assets/showcase/images/themes/arya-green.png"
                    alt="Arya Green"
                  />
                </button>
                <span>Arya Green</span>
              </div>
              <div
                [class]="{ active: config.theme == 'arya-orange' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'arya-orange', true)"
                >
                  <img
                    src="assets/showcase/images/themes/arya-orange.png"
                    alt="Arya Orange"
                  />
                </button>
                <span>Arya Orange</span>
              </div>
              <div
                [class]="{ active: config.theme == 'arya-purple' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'arya-purple', true)"
                >
                  <img
                    src="assets/showcase/images/themes/arya-purple.png"
                    alt="Arya Purple"
                  />
                </button>
                <span>Arya Purple</span>
              </div>
            </div>

            <h5 style="">Legacy</h5>
            <div class="p-grid free-themes" style="">
              <div [class]="{ active: config.theme == 'nova' }" class="p-col-3">
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'nova', false)"
                >
                  <img
                    src="assets/showcase/images/themes/nova.png"
                    alt="Nova"
                  />
                </button>
                <span>Nova</span>
              </div>
              <div
                [class]="{ active: config.theme == 'nova-alt' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'nova-alt', false)"
                >
                  <img
                    src="assets/showcase/images/themes/nova-alt.png"
                    alt="Nova Alt"
                  />
                </button>
                <span>Nova Alt</span>
              </div>
              <div
                [class]="{ active: config.theme == 'nova-accent' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'nova-accent', false)"
                >
                  <img
                    src="assets/showcase/images/themes/nova-accent.png"
                    alt="Nova Accent"
                  />
                </button>
                <span>Nova Accent</span>
              </div>
              <!-- <div class="p-col-3"></div> -->
              <div
                [class]="{ active: config.theme == 'luna-blue' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'luna-blue', true)"
                >
                  <img
                    src="assets/showcase/images/themes/luna-blue.png"
                    alt="Luna Blue"
                  />
                </button>
                <span>Luna Blue</span>
              </div>
              <div
                [class]="{ active: config.theme == 'luna-green' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'luna-green', true)"
                >
                  <img
                    src="assets/showcase/images/themes/luna-green.png"
                    alt="Luna Green"
                  />
                </button>
                <span>Luna Green</span>
              </div>
              <div
                [class]="{ active: config.theme == 'luna-amber' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'luna-amber', true)"
                >
                  <img
                    src="assets/showcase/images/themes/luna-amber.png"
                    alt="Luna Amber"
                  />
                </button>
                <span>Luna Amber</span>
              </div>
              <div
                [class]="{ active: config.theme == 'luna-pink' }"
                class="p-col-3"
              >
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'luna-pink', true)"
                >
                  <img
                    src="assets/showcase/images/themes/luna-pink.png"
                    alt="Luna Pink"
                  />
                </button>
                <span>Luna Pink</span>
              </div>
              <div [class]="{ active: config.theme == 'rhea' }" class="p-col-3">
                <button
                  class="p-link"
                  (click)="changeTheme($event, 'rhea', false)"
                >
                  <img
                    src="assets/showcase/images/themes/rhea.png"
                    alt="Rhea"
                  />
                </button>
                <span>Rhea</span>
              </div>
            </div>

            <h4 style="display:none;">Premium Angular-CLI Templates</h4>
            <p style="display:none;">
              Beautifully crafted premium
              <a href="https://cli.angular.io/">Angular CLI</a> application
              templates by the PrimeTek design team.
            </p>
            <div class="p-grid premium-themes" style="display:none;">
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/diamond-ng">
                  <img
                    alt="Mirage"
                    src="assets/showcase/images/layouts/diamond-ng.png"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/mirage-ng">
                  <img
                    alt="Mirage"
                    src="assets/showcase/images/layouts/mirage-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/prestige-ng">
                  <img
                    alt="Prestige"
                    src="assets/showcase/images/layouts/prestige-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/sapphire-ng">
                  <img
                    alt="Sapphire"
                    src="assets/showcase/images/layouts/sapphire-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/roma-ng">
                  <img
                    alt="Roma"
                    src="assets/showcase/images/layouts/roma-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/babylon-ng">
                  <img
                    alt="Babylon"
                    src="assets/showcase/images/layouts/babylon-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/olympia-ng">
                  <img
                    alt="Olympia"
                    src="assets/showcase/images/layouts/olympia-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/california-ng">
                  <img
                    alt="California"
                    src="assets/showcase/images/layouts/california-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/ecuador-ng">
                  <img
                    alt="Ecuador"
                    src="assets/showcase/images/layouts/ecuador-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/harmony-ng">
                  <img
                    alt="Harmony"
                    src="assets/showcase/images/layouts/harmony-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/apollo-ng">
                  <img
                    alt="Apollo"
                    src="assets/showcase/images/layouts/apollo-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/serenity-ng">
                  <img
                    alt="Serenity"
                    src="assets/showcase/images/layouts/serenity-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/avalon-ng">
                  <img
                    alt="Avalon"
                    src="assets/showcase/images/layouts/avalon-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/verona-ng">
                  <img
                    alt="Verona"
                    src="assets/showcase/images/layouts/verona-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/manhattan-ng">
                  <img
                    alt="Manhattan"
                    src="assets/showcase/images/layouts/manhattan-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/paradise-ng">
                  <img
                    alt="Paradise"
                    src="assets/showcase/images/layouts/paradise-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/ultima-ng">
                  <img
                    alt="Ultima"
                    src="assets/showcase/images/layouts/ultima-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/barcelona-ng">
                  <img
                    alt="Barcelona"
                    src="assets/showcase/images/layouts/barcelona-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/morpheus-ng">
                  <img
                    alt="Morpheus"
                    src="assets/showcase/images/layouts/morpheus-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/atlantis-ng">
                  <img
                    alt="Atlantis"
                    src="assets/showcase/images/layouts/atlantis-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/poseidon-ng">
                  <img
                    alt="Poseidon"
                    src="assets/showcase/images/layouts/poseidon-ng.jpg"
                  />
                </a>
              </div>
              <div class="p-col-12 p-md-4">
                <a href="https://www.primefaces.org/layouts/omega-ng">
                  <img
                    alt="Omega"
                    src="assets/showcase/images/layouts/omega-ng.jpg"
                  />
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [
    `
      .free-themes .active {
        box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
          0 24px 38px 3px rgba(0, 0, 0, 0.14),
          0 9px 46px 8px rgba(0, 0, 0, 0.12);
        // border:1px solid white;
        color: red;
      }
    `,
  ],
})
export class AppConfigComponent implements OnInit, OnDestroy {
  active: boolean;

  scale = 16;

  scales: number[] = [12, 13, 14, 15, 16, 17, 18, 19, 20];

  outsideClickListener: any;

  config: AppConfig;

  subscription: Subscription;

  constructor(
    private el: ElementRef,
    private router: Router,
    private configService: AppConfigService,
    private cookieService: CookieService
  ) {
    const themeElement = document.getElementById('theme-link');
    if (configService.config.theme !== 'md-light-indigo') {
      themeElement.setAttribute(
        'href',
        themeElement
          .getAttribute('href')
          .replace('md-light-indigo', configService.config.theme)
      );

      this.toggleDark(configService.config.theme.indexOf('dark')>-1 || configService.config.theme.indexOf('luna')>-1 || configService.config.theme.indexOf('vela')>-1 || configService.config.theme.indexOf('arya')>-1)
    }else{
      this.toggleDark(false)
    }
  }

  ngOnInit() {
    this.config = this.configService.config;
    this.subscription = this.configService.configUpdate$.subscribe(
      (config) => (this.config = config)
    );
    this.setScale(this.scale);
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.active = false;
      }
    });
  }

  setScale(s) {
    document.documentElement.style.fontSize = s + 'px';
    this.scale = s;
  }

  toggleConfigurator(event: Event) {
    this.active = !this.active;
    event.preventDefault();

    if (this.active) {
      this.bindOutsideClickListener();
    } else {
      this.unbindOutsideClickListener();
    }
  }

  hideConfigurator(event) {
    this.active = false;
    this.unbindOutsideClickListener();
    event.preventDefault();
  }

  changeTheme(event: Event, theme: string, dark: boolean) {
    const themeElement = document.getElementById('theme-link');
    console.log(theme);
    themeElement.setAttribute(
      'href',
      themeElement.getAttribute('href').replace(this.config.theme, theme)
    );
    this.configService.updateConfig({ ...this.config, ...{ theme, dark } });
    this.cookieService.set('theme', theme);

    console.log(document.getElementsByTagName('html')[0].className);

    // document.getElementsByTagName('html')[0].className
    this.toggleDark(dark)

    event.preventDefault();
  }

  toggleDark(dark) {
    let html = document.getElementsByTagName('html')[0]
    this.removeClass(html, 'light')
    this.removeClass(html, 'dark')
      html.className = html.className + (dark? ' dark' :' light')

  }
  removeClass(elm, removeClassName) {
    var classNames = elm.className.split(/\s+/); //首先渠道类名字符串并拆分成数组
    var pos = -1,
      i,
      len;
    for (i = 0, len = classNames.length; i < len; i++) {
      //找到要删的类名
      if (classNames[i] == removeClassName) {
        pos = i;
        break;
      }
    }
    if (pos == -1) {
      // throw Error('没有这个类名');
    }
    classNames.splice(i, 1); //删除类名
    elm.className = classNames.join(' '); //把剩下的类名拼成字符串重新设置
  }

  onRippleChange() {
    this.configService.updateConfig(this.config);
  }

  bindOutsideClickListener() {
    if (!this.outsideClickListener) {
      this.outsideClickListener = (event) => {
        if (this.active && this.isOutsideClicked(event)) {
          this.active = false;
        }
      };
      document.addEventListener('click', this.outsideClickListener);
    }
  }

  unbindOutsideClickListener() {
    if (this.outsideClickListener) {
      document.removeEventListener('click', this.outsideClickListener);
      this.outsideClickListener = null;
    }
  }

  isOutsideClicked(event) {
    return !(
      this.el.nativeElement.isSameNode(event.target) ||
      this.el.nativeElement.contains(event.target)
    );
  }

  decrementScale() {
    this.scale--;
    document.documentElement.style.fontSize = this.scale + 'px';
  }

  incrementScale() {
    this.scale++;
    document.documentElement.style.fontSize = this.scale + 'px';
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}
